import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { Menu, Dropdown } from 'antd';
import Icon, { SettingOutlined } from '@ant-design/icons';
// 引入的图标
import {
    commodity,
    dingDan,
    homeIcon,
    morIcon,
    breaksIcon,
    vipIcon,
    goodsIcon,
    pointsIcon,
    evaluateIcon,
    XinxiIcon,
    rightsIcon,
} from './image/icon/icon';
import { Route } from 'react-router-dom';
import { CrumbsActive } from '../../store/actives/actives';
// 引入获取时间的公共方法
import Time from '../../components/time/time';
import Logo from './image/logo.png';
import userLogin from './image/user.png';
import userXia from './image/xia.png';


// 财务管理-积分明细
import Integral from '../finance/integral';
// 财务管理-余额明细
import Balance from '../finance/balance';
// 财务管理-对账单管理
import Account from '../finance/account';
// 财务管理-充值记录
import Recharge from '../finance/recharge';
// 优惠管理-基本功能
import Basic from '../discounts/basic';
// 优惠管理-优惠卷管理
import Coupons from '../discounts/coupons';
import ADiscounts from '../discounts/addDiscounts';
// 会员列表
import Viplist from '../member/viplist';

// 首页
import HomeIndex from '../homeIndex/homeIndex';
// 商品列表
import GoodsList from '../goodsList/goodsList';
// 商城列表
import MallList from '../mallList/mallList';
// 添加商品
import AddItem from '../addItem/addItem';
// 添加商品2
import GoodAdd from '../goodsList/goodAdd.jsx';
// 工具
import OrderTool from '../order/orderTool.jsx';
// 订单概述
import OverView from '../order/overview.jsx';
// 首页图标
import NavIcon from '../homeIndex/navIcon';
// 轮播图管理
import Slideshow from '../slideshow/slideshow';
// 分类管理
import ClassShow from '../classShow/classShow';
// 状态管理
import StateAdmin from '../stateAdmin/stateAdmin';
import './scss/home.scss';

const { SubMenu } = Menu;

const rootSubmenuKeys = [
    'sub1',
    'sub2',
    'sub3',
    'sub4',
    'sub5',
    'sub6',
    'sub7',
    'sub8',
    'sub9',
    'sub10',
    'sub11',
];
const Home = (props) => {
    const [openKeys, setOpenKeys] = useState([props.store.OpenKeys]);
    const [SelectedKeys, setSelectedKeys] = useState(props.store.SelectedKeys);

    useEffect(() => {
        setOpenKeys([props.store.OpenKeys]);
        setSelectedKeys(props.store.SelectedKeys);
        onSelect({ key: props.store.SelectedKeys });
    }, [props.store.SelectedKeys]);

    const onOpenChange = (keys) => {
        const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
        if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            setOpenKeys(keys);
        } else {
            setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
        }
    };

    let onSelect = (keys) => {
        // 切记不可删除
        // props.CrumbsActiveFun([openKeys[0], keys.key]);
        setSelectedKeys(keys.key);
    };

    // 退出登录函数
    let OutUser = () => {
        // 写退出逻辑
        props.history.replace('/login');
    };

    let menu = (
        <Menu>
            <Menu.Item key="0" onClick={OutUser}>
                <SettingOutlined />
                <span className="OutUser">退出登录</span>
            </Menu.Item>
        </Menu>
    );
    // 路由跳转
    let goRoute = (url) => {
        props.history.push(url);
    };

    // 路由控制
    let RouterIf = (text) => {
        let list = props.location.state?.visit || props.store.visitList?.visit;
        let obj = {};
        if (list) {
            let listArr = JSON.parse(list);
            listArr.map((item) => (obj[item] = true));
            return obj[text];
        }
        return false;
    };
    return (
        <div className="flex home">
            <div className="HomeNav">
                {/* 顶部logo */}
                <div className="homeLogo flex">
                    <img src={Logo} alt="logo" className="logo" />
                    <h2>南京鼓楼医院</h2>
                </div>
                <Menu
                    mode="inline"
                    theme="dark"
                    openKeys={openKeys}
                    selectedKeys={SelectedKeys}
                    onSelect={onSelect}
                    onOpenChange={onOpenChange}
                    style={{ width: 250 }}>
                    {RouterIf('系统首页') ? (
                        <Menu.Item key="sub1" icon={<Icon component={homeIcon} />} onClick={() => goRoute('/')}>
                            系统首页
                        </Menu.Item>
                    ) : null}
                    {RouterIf('商品管理') ? (
                        <SubMenu key="sub2" icon={<Icon component={commodity} />} title="商品管理">
                            <Menu.Item key="5" onClick={() => goRoute('/goodsList')}>
                                商品列表
              </Menu.Item>
                            <Menu.Item key="6" onClick={() => goRoute('/')}>
                                商品组
              </Menu.Item>
                            <Menu.Item key="7" onClick={() => goRoute('/')}>
                                分类管理
              </Menu.Item>
                            <Menu.Item key="8" onClick={() => goRoute('/')}>
                                品牌管理
              </Menu.Item>
                            <Menu.Item key="9" onClick={() => goRoute('/')}>
                                设置
              </Menu.Item>
                        </SubMenu>
                    ) : null}
                    {RouterIf('订单管理') ? (
                        <SubMenu key="sub3" icon={<Icon component={dingDan} />} title="订单管理">
                            <Menu.Item key="10" onClick={() => goRoute('/overview')}>
                                订单概述
              </Menu.Item>
                            <Menu.Item key="11" onClick={() => goRoute('/')}>
                                订单状态
              </Menu.Item>
                            <Menu.Item key="12" onClick={() => goRoute('/')}>
                                维权管理
              </Menu.Item>
                            <Menu.Item key="13" onClick={() => goRoute('/orderTool')}>
                                工具
              </Menu.Item>
                        </SubMenu>
                    ) : null}
                    {RouterIf('财务管理') ? (
                        <SubMenu key="sub4" icon={<Icon component={morIcon} />} title="财务管理">
                            <Menu.Item key="14" onClick={() => goRoute('/integral')}>
                                积分明细
            </Menu.Item>
                            <Menu.Item key="15" onClick={() => goRoute('/balance')}>
                                余额明细
            </Menu.Item>
                            <Menu.Item key="16" onClick={() => goRoute('/account')}>
                                对账单管理
            </Menu.Item>
                            <Menu.Item key="17" onClick={() => goRoute('/recharge')}>
                                充值记录
            </Menu.Item>
                        </SubMenu>
                    ) : null}
                    {RouterIf('优惠管理') ? (
                        <SubMenu key="sub5" icon={<Icon component={breaksIcon} />} title="优惠管理">
                            <Menu.Item key="18" onClick={() => goRoute('/basic')}>
                                基本功能
            </Menu.Item>
                            <Menu.Item key="19" onClick={() => goRoute("/coupons")}>
                                优惠券管理
            </Menu.Item>
                        </SubMenu>
                    ) : null}
                    {RouterIf('会员管理') ? (
                        <SubMenu key="sub6" icon={<Icon component={vipIcon} />} title="会员管理">
                            <Menu.Item key="20" onClick={() => goRoute('/viplist')}>
                                会员列表
              </Menu.Item>
                            <Menu.Item key="21" onClick={() => goRoute('/')}>
                                会员概述
              </Menu.Item>
                            <Menu.Item key="22" onClick={() => goRoute('/')}>
                                会员等级
              </Menu.Item>
                            <Menu.Item key="23" onClick={() => goRoute('/')}>
                                分组设置
              </Menu.Item>
                        </SubMenu>
                    ) : null}
                    {RouterIf('活动管理') ? (
                        <SubMenu key="sub7" icon={<Icon component={goodsIcon} />} title="活动管理">
                            <Menu.Item key="24" onClick={() => goRoute('/')}>
                                秒杀管理
              </Menu.Item>
                            <Menu.Item key="25" onClick={() => goRoute('/')}>
                                拼团管理
              </Menu.Item>
                        </SubMenu>
                    ) : null}
                    {RouterIf('积分商城') ? (
                        <SubMenu key="sub8" icon={<Icon component={pointsIcon} />} title="积分商城">
                            <Menu.Item key="26" onClick={() => goRoute('/MallList')}>
                                商城列表
              </Menu.Item>
                            <Menu.Item key="27" onClick={() => goRoute('/Slideshow')}>
                                轮播图管理
              </Menu.Item>
                            <Menu.Item key="28" onClick={() => goRoute('/classShow')}>
                                分类管理
              </Menu.Item>
                            <Menu.Item key="29" onClick={() => goRoute('/stateAdmin')}>
                                状态管理
              </Menu.Item>
                        </SubMenu>
                    ) : null}
                    {RouterIf('权限管理') ? (
                        <SubMenu key="sub9" icon={<Icon component={rightsIcon} />} title="权限管理">
                            <Menu.Item key="30" onClick={() => goRoute('/')}>
                                门店管理
              </Menu.Item>
                            <Menu.Item key="31" onClick={() => goRoute('/')}>
                                管理员管理
              </Menu.Item>
                            <Menu.Item key="32" onClick={() => goRoute('/')}>
                                体现审核
              </Menu.Item>
                            <Menu.Item key="33" onClick={() => goRoute('/')}>
                                角色管理
              </Menu.Item>
                        </SubMenu>
                    ) : null}
                    {RouterIf('评价管理') ? (
                        <SubMenu key="sub10" icon={<Icon component={evaluateIcon} />} title="评价管理">
                            <Menu.Item key="34" onClick={() => goRoute('/')}>
                                查看评价详情
              </Menu.Item>
                            <Menu.Item key="35" onClick={() => goRoute('/')}>
                                审核评价
              </Menu.Item>
                            <Menu.Item key="36" onClick={() => goRoute('/')}>
                                回复评价
              </Menu.Item>
                        </SubMenu>
                    ) : null}
                    {RouterIf('信息管理') ? (
                        <SubMenu key="sub11" icon={<Icon component={XinxiIcon} />} title="信息管理">
                            <Menu.Item key="37" onClick={() => goRoute('/')}>
                                意见反馈
              </Menu.Item>
                            <Menu.Item key="38" onClick={() => goRoute('/')}>
                                合作申请
              </Menu.Item>
                            <Menu.Item key="39" onClick={() => goRoute('/')}>
                                用药问答
              </Menu.Item>
                        </SubMenu>
                    ) : null}
                </Menu>
            </div>
            <div className="HomeBox">
                <div className="HomeHeader flex">
                    <div className="HomeHeaderRight flex">
                        <Time />
                        <Dropdown overlay={menu} trigger={['click']}>
                            <div className="HomeHUser flex">
                                <img src={userLogin} alt="user" className="HomeHUserLogin" />
                                <div className="HomeUserName">
                                    <p>欢迎您!</p>
                                    <p>{props.store.visitList?.name || props.location.state?.name}</p>
                                </div>
                                <img src={userXia} alt="v" className="HomeHUserXia" />
                            </div>
                        </Dropdown>
                    </div>
                </div>
                <div className="HomeBox">
                    <Route path="/" exact component={HomeIndex} />
                    <Route path="/goodslist" component={GoodsList} />
                    <Route path="/MallList" component={MallList} />
                    <Route path="/additem" component={AddItem} />
                    <Route path="/goodAdd" component={GoodAdd} />
                    <Route path="/orderTool" component={OrderTool} />
                    <Route path="/overview" component={OverView} />
                    <Route path="/Slideshow" component={Slideshow} />
                    <Route path="/navicon" component={NavIcon} />
                    <Route path="/classShow" component={ClassShow} />
                    <Route path="/stateAdmin" component={StateAdmin} />




                    <Route path="/integral" component={Integral} />
                    <Route path="/balance" component={Balance} />
                    <Route path="/account" component={Account} />
                    <Route path="/recharge" component={Recharge} />
                    <Route path="/basic" component={Basic} />
                    <Route path="/coupons" component={Coupons} />
                    <Route path="/add/ADiscounts" component={ADiscounts} />
                    <Route path="/viplist" component={Viplist} />
                </div>
            </div>
        </div>
    );
};
let mapStoreToProps = (store) => {
    return {
        store,
    };
};
let mapDisplayToProps = (display) => {
    return {
        CrumbsActiveFun (active) {
            display(CrumbsActive(active));
        },
    };
};
export default connect(mapStoreToProps, mapDisplayToProps)(Home);
